<template>
    <div class="ItemMusicList">
        <div class="itemListTop">
            <div class="listLeft">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang"></use>
                </svg>
                <span class="listLeft1">播放全部</span><span class="listLeft2">(共{{ itemList.length }}首)</span>
            </div>
            <div class="ListRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiahao"></use>
                </svg>
                <span>收藏({{ changCount(subscribedCount) }})</span>
            </div>
        </div>
        <div class="itemList">
            <div class="item" v-for="(item, index) in itemList" :key="index" @click="playMusic(index)">
                <div class="itemLeft">
                    <span class="itemLeft1">{{ index+ 1 }}</span>

                    <div class="itemLeft2">
                        <p>{{ item.al.name }}</p>
                        <span v-for="item1 in item.ar" :key="item1.id">{{ item1.name }}</span>
                    </div>
                </div>
                <div class="itemRight">
                    <svg class="icon_bofang" aria-hidden="true" v-if="item.mv !== 0">
                        <use xlink:href="#icon-bofang1"></use>
                    </svg>
                    <svg class="icon_liebiao" aria-hidden="true">
                        <use xlink:href="#icon-list"></use>
                    </svg>
                </div>
            </div>
        </div>

    </div>
</template>

<script>


import { mapMutations } from 'vuex';
export default {

    props: ['itemList', 'subscribedCount'],

    methods: {
      ...mapMutations(['updatePlayList', 'updatePlayListIndex', 'play']),
      async playMusic(index) {
        this.$store.commit('setAudio');
        console.log(this.itemList, '点击事件');
        await this.updatePlayList(this.itemList);
        this.updatePlayListIndex(index);

        await this.play();
      },
      changCount(num) {
        if (num >= 100000000) {
          return (num / 100000000).toFixed(1) + '亿';
        } else if (num >= 10000) {
          return (num / 10000).toFixed(1) + '万';
        } else {
          return num;
        }
      },
    }

}
</script>

<style lang="less" scoped>
.ItemMusicList {

  height: 10rem;
  background: white;
  width: 100%;
  margin-top: 20px;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;

  .itemList {
    width: 100%;
    height: 50px;

        .item {
            display: flex;
            align-content: center;
            justify-content: space-between;
            margin: 10px 0;

            .itemLeft {
                width: 70%;
                display: flex;
                align-content: center;


                .itemLeft1 {
                    font-size: 10px;
                    color: #999b9f;
                    margin: 10px 10px;
                }

                .itemLeft2 {
                    font-size: 14px;
                    font-weight: 900;

                    span {
                        font-size: 10px;
                        color: #999b9f;
                    }
                }
            }

            .itemRight {
                width: 20%;
                display: flex;
                align-items: center;
                position: relative;
                justify-content: flex-end;

                .icon_bofang {
                    width: 0.6rem;
                    height: 0.6rem;
                    position: absolute;
                    margin-right: 40px;

                }

                .icon_liebiao {
                    width: 0.7rem;
                    height: 0.7rem;
                    right: 10px;
                    padding-right: -10px;
                }
            }
        }
    }

    .itemListTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;

        .listLeft {

            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 10px;

            .listLeft1 {
                margin-left: 5px;
                font-weight: 900;
                font-size: 14px;


            }

            .listLeft2 {
                color: #b9bdc8;
                font-size: 10px;
            }

            .icon {
                width: 0.7rem;
                height: 0.7rem;
            }

        }

        .ListRight {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.4rem;
            background: #ff1800;
            height: 0.9rem;
            width: 2.6rem;
            margin-right: 10px;

            span {
                font-size: 10px;
                color: white
            }

            .icon {
                width: 0.5rem;
                height: 0.5rem;
            }
        }
    }
}
</style>